<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学科消消乐</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background: #f5f5f5;
            font-family: Arial, sans-serif;
            padding: 10px;
            height: 100vh;
            display: flex;
            flex-direction: column;
        }

        #header {
            display: flex;
            gap: 10px;
            margin-bottom: 10px;
        }

        #timer {
            background: #ff8c00;
            color: white;
            padding: 12px;
            text-align: center;
            border-radius: 8px;
            flex: 1;
        }

        #speakerBtn {
            width: 46px;
            background: #ff8c00;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            position: relative;
            transition: all 0.3s;
        }
        #speakerBtn::before {
            content: '';
            position: absolute;
            width: 24px;
            height: 24px;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/></svg>');
        }
        #speakerBtn.disabled {
            background: #e0e0e0;
        }
        #speakerBtn.disabled::before {
            background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="%23999" xmlns="http://www.w3.org/2000/svg"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/></svg>');
        }

        #gameBoard {
            flex: 1;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 8px;
            perspective: 1000px;
        }

        .card {
            background: transparent;
            border-radius: 10px;
            position: relative;
            transform-style: preserve-3d;
            transition: all 0.5s;
            cursor: pointer;
        }

        .card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 10px;
            backface-visibility: hidden;
            transform: rotateY(0deg);
            box-shadow: 2px 3px 5px rgba(0,0,0,0.2);
        }

        .card.chinese::before {
            background: linear-gradient(145deg, #4CAF50, #45a049);
        }

        .card.english::before {
            background: linear-gradient(145deg, #0abab5, #09a7a3);
        }

        .card::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: repeating-linear-gradient(
                45deg,
                #f0f0f0,
                #f0f0f0 10px,
                #e0e0e0 10px,
                #e0e0e0 20px
            );
            border-radius: 10px;
            transform: rotateY(180deg);
            backface-visibility: hidden;
        }

        .card.flipped {
            transform: rotateY(180deg);
        }

        .card.matched {
            border: 1.5px dashed #999;
            background: transparent;
            pointer-events: none;
        }

        .card.matched::before {
            display: none;
        }

        .card.matched span {
            color: #999;
        }

        .card span {
            color: white;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            backface-visibility: hidden;
            text-align: center;
            font-size: 18px;
            user-select: none;
            z-index: 1;
        }

        #startBtn {
            background: linear-gradient(145deg, #2196F3, #1976d2);
            color: white;
            border: none;
            padding: 15px 25px;
            border-radius: 8px;
            font-size: 18px;
            margin-top: 10px;
            cursor: pointer;
            transition: all 0.3s;
            box-shadow: 2px 3px 5px rgba(0,0,0,0.2);
        }

        #startBtn:active {
            transform: translateY(1px);
        }

        /* 通关弹窗样式 */
        #overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.7);
            display: none;
            justify-content: center;
            align-items: center;
        }

        #result {
            background: #4CAF50;
            color: white;
            padding: 40px;
            border-radius: 15px;
            font-size: 32px;
            text-align: center;
            min-width: 300px;
        }
    </style>
</head>
<body>
    <div id="header">
        <div id="timer">请点击开始游戏</div>
        <button id="speakerBtn"></button>
    </div>
    <div id="gameBoard"></div>
    <button id="startBtn">开始游戏</button>
    
    <!-- 通关弹窗 -->
    <div id="overlay">
        <div id="result">恭喜你通关啦！</div>
    </div>

    <script>
        const wordGroups = [
            { en: "subject", ch: ["学科/科目"] },
            { en: "lesson", ch: ["课"] },
            { en: "Chinese", ch: ["语文"] },
            { en: "Maths", ch: ["数学"] },
            { en: "English", ch: ["英语"] },
            { en: "Science", ch: ["科学"] },
            { en: "PE", ch: ["体育"] },
            { en: "Music", ch: ["音乐"] },
            { en: "Art", ch: ["美术"] },
            { en: "timetable", ch: ["课程表/时间表"] },
            { en: "from", ch: ["从/来自"] },
            { en: "a.m.", ch: ["上午"] },
            { en: "p.m.", ch: ["下午"] },
            { en: "break", ch: ["休息"] }
        ];

        const gameBoard = document.getElementById('gameBoard');
        const timer = document.getElementById('timer');
        const startBtn = document.getElementById('startBtn');
        const speakerBtn = document.getElementById('speakerBtn');
        const overlay = document.getElementById('overlay');
        const result = document.getElementById('result');
        let selectedCards = [];
        let isProcessing = false;
        let timeLeft = 20;
        let timePassed = 0;
        let timerInterval;
        let countupInterval;
        let isSoundEnabled = true;

        function formatTime(seconds) {
            if(seconds >= 60) {
                const mins = Math.floor(seconds / 60);
                const secs = seconds % 60;
                return `${String(mins).padStart(2, '0')}分${String(secs).padStart(2, '0')}秒`;
            }
            return `${seconds}秒`;
        }

        function playSpeech(text) {
            if (!isSoundEnabled) return;
            const speech = new SpeechSynthesisUtterance(text);
            speech.lang = 'zh-CN';
            window.speechSynthesis.speak(speech);
        }

        speakerBtn.addEventListener('click', function() {
            isSoundEnabled = !isSoundEnabled;
            this.classList.toggle('disabled');
        });

        function createCards() {
            gameBoard.innerHTML = '';
            const allCards = [];
            
            wordGroups.forEach(group => {
                group.ch.forEach(ch => allCards.push(createCard(ch, 'chinese')));
                allCards.push(createCard(group.en, 'english'));
            });

            for (let i = allCards.length - 1; i > 0; i--) {
                const j = Math.floor(Math.random() * (i + 1));
                [allCards[i], allCards[j]] = [allCards[j], allCards[i]];
            }

            allCards.forEach(card => {
                card.classList.add('flipped');
                gameBoard.appendChild(card);
            });
        }

        function createCard(text, type) {
            const card = document.createElement('div');
            card.className = `card ${type}`;
            card.innerHTML = `<span>${text}</span>`;
            card.addEventListener('click', () => handleCardClick(card));
            return card;
        }

        function handleCardClick(card) {
            if (isProcessing || timeLeft > 0 || card.classList.contains('matched')) return;

            if (window.speechSynthesis.speaking) {
                window.speechSynthesis.cancel();
            }
            playSpeech(card.textContent);
            
            card.classList.toggle('flipped');
            selectedCards = selectedCards.filter(c => c !== card);
            if (!card.classList.contains('flipped')) {
                selectedCards.push(card);
            }

            if (selectedCards.length === 2) {
                checkMatch();
            }
        }

        function checkMatch() {
            isProcessing = true;
            const [card1, card2] = selectedCards;
            const text1 = card1.textContent;
            const text2 = card2.textContent;

            const isMatch = wordGroups.some(group => {
                const chMatch = group.ch.some(ch => ch === text1) && group.en === text2;
                const enMatch = group.ch.some(ch => ch === text2) && group.en === text1;
                return chMatch || enMatch;
            });

            if (isMatch) {
                card1.classList.add('matched');
                card2.classList.add('matched');
                checkWin();
            } else {
                setTimeout(() => {
                    card1.classList.add('flipped');
                    card2.classList.add('flipped');
                }, 1000);
            }

            selectedCards = [];
            setTimeout(() => isProcessing = false, 1000);
        }

        function checkWin() {
            if (document.querySelectorAll('.card:not(.matched)').length === 0) {
                clearInterval(timerInterval);
                clearInterval(countupInterval);
                overlay.style.display = 'flex';
                playSpeech('恭喜你通关啦！');
                setTimeout(() => {
                    overlay.style.display = 'none';
                }, 2000);
            }
        }

        function startGame() {
            startBtn.textContent = '重新开始';
            clearInterval(timerInterval);
            clearInterval(countupInterval);
            
            timeLeft = 20;
            timePassed = 0;
            isProcessing = false;
            selectedCards = [];
            timer.textContent = '游戏开始，请记单词 00:20';

            playSpeech('游戏开始，请记单词');
            createCards();
            
            setTimeout(() => {
                document.querySelectorAll('.card').forEach(card => {
                    card.classList.remove('flipped');
                });
            }, 100);

            timerInterval = setInterval(() => {
                timeLeft--;
                timer.textContent = `游戏开始，请记单词 ${String(timeLeft).padStart(2, '0')}`;
                
                if (timeLeft <= 0) {
                    clearInterval(timerInterval);
                    document.querySelectorAll('.card').forEach(card => {
                        if (!card.classList.contains('matched')) {
                            card.classList.add('flipped');
                        }
                    });
                    
                    countupInterval = setInterval(() => {
                        timePassed++;
                        timer.textContent = `用时：${formatTime(timePassed)}`;
                    }, 1000);
                }
            }, 1000);
        }

        createCards();
        startBtn.addEventListener('click', startGame);
    </script>
</body>
</html>